<template>
  <div>
    <div class="top">
      <van-search shape="round" background="#1A191E" placeholder="请输入搜索关键词" />
    </div>
    <div class="top-nav">
      <van-row>
        <van-col span="6">
          综合排序
          <van-icon name="arrow-down" />
        </van-col>
        <van-col span="6">销量最高</van-col>
        <van-col span="6">距离最近</van-col>
        <van-col span="6">
          筛选
          <van-icon name="filter-o" />
        </van-col>
      </van-row>
    </div>
    <div class="category">
      <ul>
        <li v-for="(item,index) in categoryList" 
        :key="index"
        >
          <img :src="item.icon" alt="">
          <span>{{item.name}}</span>
        </li>
      </ul>
    </div>
    <div class="storelist">
      <h3>——— 附件商家 ———</h3>
    </div>
    <div class="goodlist">
      <GoodList 
      v-for="(item,index) in shopList"
      :key="index"
      :item="item"
       @goodsClick="goodsClick"
      />
    </div>
    <div class="footer-nav">
      <van-tabbar v-model="active" active-color="red">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="orders-o">订单</van-tabbar-item>
        <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import GoodList from "../components/GoodList";
import axios from "axios";
export default {
  data() {
    return {
      active: 0,
      categoryList:[],
      shopList:[]
    };
  },
  components: {
    GoodList,
  },
  created(){
    axios.get('http://localhost:8080/category.json').then(res=>{
      // console.log(res.data.data.kingkongList)
      this.categoryList = res.data.data.kingkongList
    }),
    axios.get('http://localhost:8080/listData.json').then(res=>{
      // console.log(res.data.data.shopList)
      this.shopList = res.data.data.shopList
    })
  },
  methods:{
    goodsClick(item){
      // console.log(item)
      this.$router.push({
        path:'/classify',
        query:{
          item:item
        }
      })
    }
  }
};
</script>

<style scoped>
.top{
  position: fixed;
  width: 100%;
  height: 64px;
  top: 0;
  left: 0;
  z-index: 3;
}
.top-nav {
  padding: 10px;
  margin-top: 54px;
  border-bottom: 1px solid #999;
}
.category {
  width: 100%;
  overflow: scroll;
}
.category ul{
  width: 170%;
  display: flex;
  flex-wrap: wrap;
}
.category ul li img{
  width: 50px;
  height: 50px;
}
.category ul li{
  width: 50px;
  padding: 10px;
  font-size: 12px;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}
.storelist{
  width: 100%;
  text-align: center;
}

</style>